<template>
	<view class="header-bg pb-safe-area">
		<view class="flex header flex-center" v-if="userStore.hasLogin()">
			<view class="headimg" :class="{'headimg-vip':USERINFO.vip_state}">
				<image :src="USERINFO.headimg" class="headimg-image" />
				<uni-icons type="vip-filled" class="headimg-vip-icon" size="20" color="var(--xl-vip-color)"></uni-icons>
			</view>
			<view class="flex-1 pl-4">
				<view class="font-weight-600 mb-1">{{ USERINFO.nickname }}</view>
				<view class="h10 text-primary-light-1" v-if="USERINFO.vip_state">{{USERINFO.vip_title}} {{USERINFO.days_remaining?USERINFO.days_remaining+'天后到期':'永久'}}</view>
				<view class="h10 text-primary-light-1" v-else>未开通会员</view>
			</view>
			<view class="font-weight-600 text-dark-light-5" @tap="setClipboard(USERINFO.id+'')">ID：{{USERINFO.id}}</view>
		</view>
		<view class="flex header flex-center" v-else @click="clickPage">
			<view class="headimg flex flex-center bg-grey">
				<uni-icons type="person-filled" size="30" color="var(--xl-dark-light-5)"></uni-icons>
			</view>
			<view class="flex-1 pl-4">
				<view class="font-weight-600 mb-1">点击登录</view>
			</view>
		</view>
		<view class="p-4">
			<view class="flex bg-white rounded-4 p-2 mb-6">
				<view class="flex-1 text-center py-4 rounded-4" hover-class="bg-grey"
				@tap="clickPage('/pages/dealer/people')">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.people_num }}</view>
					<view class="h10 text-dark-light-5 mt-2">邀请人数</view>
				</view>
				<view class="flex-1 text-center py-4 rounded-4" hover-class="bg-grey"
				@tap="clickDealer">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.order_price }}</view>
					<view class="h10 text-dark-light-5 mt-2">订单总额</view>
				</view>
				<view class="flex-1 text-center py-4 rounded-4" hover-class="bg-grey"
				@tap="clickPage('/pages/dealer/log')">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.dealer_price }}</view>
					<view class="h10 text-dark-light-5 mt-2">累计收益</view>
				</view>
			</view>
			<view class="mb-6 agent-banner flex flex-center" v-if="dealer.config.dealer_state==='yes'">
				<image src="@/static/agent-icon.png" class="agent-icon"/>
				<view class="flex-1 agent-text" v-if="dealer.state===1">欢迎回来，{{USERINFO.nickname}}</view>
				<view class="flex-1 agent-text" v-else>成为代理，躺赚收益！</view>
				<view class="agent-btn mx-2" v-if="dealer.state===1" @tap="clickDealer">分销中心</view>
				<view class="agent-btn mx-2" v-else-if="dealer.state===0">审核中</view>
				<view class="agent-btn mx-2" v-else @tap="clickDealer">立即开通</view>
			</view>
			<view class="flex bg-white rounded-4 p-2 mb-6 flex-center" v-if="dealer.config.dealer_state==='yes'">
				<image src="@/static/icon-4.png" style="width: 73px;height: 77px;" mode="aspectFill" />
				<view class="flex-1 p-4">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.withdrawal_price }} ￥</view>
					<view class="h9 text-dark-light-5 mt-2">可提现金额</view>
				</view>
				<view class="bg-danger text-white rounded-round px-6 py-2 font-weight-600 text-center h8"
					hover-class="bg-danger-dark-1" @tap="clickPage('/pages/dealer/withdrawal')">立即提现</view>
			</view>
			<view class="flex flex-center mb-4 rounded-2">
				<view class="mr-4">
					<image src="@/static/icon-3.png" class="block-icon" mode="aspectFit" />
				</view>
				<view class="flex-1 text-primary font-weight-600 py-4">工具应用</view>
			</view>
			<view class="grid bg-white rounded-4 p-2">
				<view class="grid-column-6 text-center rounded-4 py-2" hover-class="bg-grey"
				@tap="clickPage('/pages/dealer/log')"
				v-if="dealer.config.dealer_state==='yes'">
					<image src="@/static/icon-5.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600">收益</view>
				</view>
				<view class="grid-column-6 text-center rounded-4 py-2" hover-class="bg-grey"
				@tap="clickPage('/pages/order/index')">
					<image src="@/static/icon-6.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 ">订单</view>
				</view>
				<view class="grid-column-6 text-center rounded-4 py-2" hover-class="bg-grey"
				@tap="$page.open('/pages/article/content?alias=help')">
					<image src="@/static/icon-7.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600">学院</view>
				</view>
				<view class="grid-column-6 text-center rounded-4 py-2" hover-class="bg-grey"
				@tap="$page.open('/pages/article/content?alias=about')">
					<image src="@/static/icon-8.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600">关于</view>
				</view>
				<view class="grid-column-6 text-center rounded-4 py-2" hover-class="bg-grey"
				@tap="clickPage('/pages/card/password')">
					<image src="@/static/icon-9.png" class="block-icon-1" mode="aspectFit" />
					<view class="h10 font-weight-600 ">卡密兑换</view>
				</view>
			</view>
		</view>
		<x-login ref="xLoginRef" @success="getDealer" auto-hide-tab-bar/>
		<x-tabbar page="pages/user/index" />
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useUserStore, useWebConfigStore,useRefs } from '@/stores';
import { $page, $http,$system, login,useStorage, replaceUrlParam } from '@/utils';
import { onLoad,onShow,onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
const userStore = useUserStore();
const { USERINFO } = useRefs(userStore);
const webConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(webConfigStore);
const xLoginRef=ref();
const dealer = ref({
	state: null,
	link: '',
	qrcode: '',
	icode:'',
	user: {
		people_num: '--',
		order_num: '--',
		order_price: '--',
		dealer_price: '--',
	},
	config: {
		dealer_state: 'no',
		dealer_apply: 'yes',
		dealer_apply_price: '',
		dealer_apply_refund: '',
		dealer_apply_refund_text: '',
		dealer_level: 0,
		dealer_proportion: 0,
		dealer_proportion_level_1: 0,
		dealer_proportion_level_2: 0,
		dealer_proportion_level_3: 0,
	},
})
onLoad(() => {
	$page.title('个人中心');
})
onShow(() => {
	uni.hideTabBar();
	getDealer();
	// #ifdef H5
	const appid=useStorage().get('APPID');
	replaceUrlParam('appid',appid);
	// #endif
})
onShareAppMessage(()=>{
	return $page.shareMessage({
		path: `/pages/index/index`
	})
})
onShareTimeline(()=>{
	return $page.shareTimeline({
		path: `/pages/index/index`
	})
})

const getDealer = () => {
	$http.get('Dealer/dealer').then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			dealer.value = res.data;
		}
	})
}
const clickDealer=()=>{
	if(userStore.hasLogin()){
		if(dealer.value.state===1){
			$page.open('/pages/dealer/index');
		}else{
			$page.open('/pages/dealer/apply');
		}
	}else{
		login({ redirect: 'user' },xLoginRef)
	}
}
const clickPage = (url: string) => {
	if(userStore.hasLogin()){
		$page.open(url);
	}else{
		login({ redirect: 'user' },xLoginRef)
	}
}
const setClipboard = (data:any) => {
	uni.setClipboardData({
		data
	})
}
</script>

<style lang="scss" scoped>
.header-bg {
	min-height: calc(100vh - var(--window-bottom));
	padding-top: max(var(--window-top), 50px);
	// #ifdef MP-WEIXIN
	padding-top: max(var(--window-top), 80px);
	// #endif
	box-sizing: border-box;
	background-image: url(@/static/header-img.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: var(--xl-grey);
}

.header {
	padding: 20px;

	.headimg {
		width: 64px;
		height: 64px;
		border: solid 2px var(--xl-white);
		border-radius: 9999rpx;
		position: relative;
		--xl-vip-color:var(--xl-dark-light-5);
		&.headimg-vip{
			--xl-vip-color:var(--xl-primary);
		}
		&-image{
			width: 60px;
			height: 60px;
			border-radius: 9999rpx;
		}
		.headimg-vip-icon{
			width: 20px;
			height: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0px;
			bottom: 0px;
			background-color: var(--xl-white);
			border-radius: 9999rpx;
		}
	}
}

.agent-banner {
	width: 100%;
	height: 85px;
	background-image: url(@/static/agent-bg.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	.agent-icon{
		width: 85px;
		height: 85px;
	}
	.agent-text{
		background-image: linear-gradient(115.42deg, rgba(202, 161, 150, 1) 0%, rgba(243, 227, 198, 1) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 600;
	}
	.agent-btn{
		width: 90px;
		height: 32px;
		text-align: center;
		color: rgba(249, 236, 236, 0.75);
		border-radius: 100px;
		background: rgba(97, 93, 115, 1);
		border: 1px solid rgba(249, 236, 236, .75);
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 28px;
	}
}

.block-icon {
	width: 45px;
	height: 45px;
}

.block-icon-1 {
	width: 55px;
	height: 55px;
	border-radius: 14px;
}

.mt--4 {
	margin-top: -12px;
}
</style>
